<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Project')"></h3>
    </template>
    
    <el-row :gutter="8">
      <el-col :span="8">
        <el-button type="primary" @click="projectStore.newProject" 
                   style="width: 100%;">
          {{ t('New project') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="projectStore.openProject" 
                   style="width: 100%;">
          {{ t('Open project') }}
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="projectStore.saveProject" 
                   style="width: 100%;">
          {{ t('Save project') }}
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { useProjectPanelStore } from '@/stores/projectPanel'
import { useLanguageStore } from '@/stores/language'

const projectStore = useProjectPanelStore()
const languageStore = useLanguageStore()

// 翻译函数
const t = (key) => {
  const translations = {
    'Project': {
      'en': 'Project',
      'zh': '项目'
    },
    'New project': {
      'en': 'New project',
      'zh': '新建项目'
    },
    'Open project': {
      'en': 'Open project',
      'zh': '打开项目'
    },
    'Save project': {
      'en': 'Save project',
      'zh': '保存项目'
    }
  }
  return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
}
</script>